<template>
  <!-- 用户组管理管理 -->
  <div class="module_par">
    <div class="module_con">
      <!-- 搜索区域 -->
      <div class="search_box">
        <el-row :gutter="20" class="box_center">
          <el-col>
            <span class="searchTxt">用户组名称:</span>
            <el-input v-model="searchBox.name" autocomplete="off" size="small" class="searchInp"></el-input>
            <el-button type="primary" class="searchBtn" @click="goSearch()" size="small" v-if="permissionList.cx">查询</el-button>
            <el-button type="primary" class="searchBtn reditBtn" @click="redit()" size="small">重置</el-button>
            <el-button type="primary" class="searchBtn reditBtn" @click="addData()" size="small" v-if="permissionList.xz">新增</el-button>
          </el-col>
        </el-row>
      </div>
      <!-- 主体内容 -->
      <div class="table-content">
        <el-table :data="tableData" border tooltip-effect="dark" style="width: 100%">
          <el-table-column type="index" width="60" label="序号" align="center"></el-table-column>
          <el-table-column prop="groupName" align="center" label="用户组名称"></el-table-column>
          <el-table-column prop="createTime" align="center" label="创建时间"></el-table-column>
          <el-table-column prop="updateTime" align="center" label="修改时间"></el-table-column>
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button type="primary" size="small" @click="editData(scope.row)" v-if="permissionList.bj">编辑</el-button>
              <!-- <el-button type="primary" size="small" @click="addToData(scope.row)" v-if="permissionList.tj">添加</el-button> -->
              <!-- <el-button type="primary" size="small" @click="editRoleData(scope.row)">角色</el-button> -->
              <el-button type="primary" size="small" @click="delData(scope.row)" v-if="permissionList.sc">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination
          v-show="total>0"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :page-sizes="[5, 10, 15, 420]"
          :page-size="tableQuery.limit"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>
      <!-- 编辑 -->
      <el-dialog title="权限编辑" :visible.sync="dialogEditSta" class="dia">
        <el-form :model="editList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户组名称">
                <el-input v-model="editList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户选择">
                  <el-select v-model="editList.sta" multiple collapse-tags placeholder="请选择" size="small">
                    <el-option
                      v-for="item in editList.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="editYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 新增 -->
      <el-dialog title="用户组新增" :visible.sync="dialogAddSta">
        <el-form :model="addList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户组名称">
                <el-input v-model="addList.name" autocomplete="off" size="small" class="searchInp"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="用户选择">
                  <el-select v-model="addList.sta" multiple collapse-tags placeholder="请选择" size="small">
                    <el-option
                      v-for="item in addList.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="addYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 添加用户 -->
      <el-dialog title="添加用户" :visible.sync="dialogAddToSta">
        <el-form :model="addToDataList" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户选择">
                  <el-select v-model="addToDataList.sta" multiple collapse-tags placeholder="请选择">
                    <el-option
                      v-for="item in addToDataList.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogAddToSta = false" size="small">取 消</el-button>
          <el-button type="primary" @click="jhYes" size="small">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 设置角色 -->
      <el-dialog title="设置角色" :visible.sync="dialogEditRoleSta">
        <el-form :model="editRole" label-width="100px">
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="用户选择">
                  <el-select v-model="editRole.sta" multiple collapse-tags placeholder="请选择">
                    <el-option
                      v-for="item in editRole.option"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value">
                    </el-option>
                  </el-select>
                </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogEditRoleSta = false" size="small">取 消</el-button>
          <!-- <el-button type="primary" @click="jsYes" size="small">确 定</el-button> -->
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      permissionList: {
        cx: false,
        xz: false,
        bj: false,
        tj: false,
        sc: false
      },
      searchBox: {
        name: ''
      }, // 搜索内容
      tableData: [], // table数据
      total: 0,
      tableQuery: {
        limit: 5,
        indexNo: 0
      },
      dialogEditSta: false, // 编辑弹框判断
      editList: {
        id: '',
        name: '',
        path: '',
        option: [],
        sta: []
      }, // 编辑弹框数据
      searchSta: false, // 搜索状态判断
      dialogAddSta: false,
      addList: {
        name: '', // 权限名称
        option: [],
        sta: []
      },
      dataList: {},
      dialogAddToSta: false,
      addToDataList: {
        id: '',
        option: [],
        sta: []
      },
      editRole: {
        id: '',
        option: [],
        sta: []
      },
      dialogEditRoleSta: false
    }
  },
  methods: {
    editRoleData (val) {

    },
    getUserList () {
      this.addList.option = []
      this.editList.option = []
      this.$requestA.get('/user', { size: 2000, tenantCode: localStorage.getItem('TENANT_CODE') }, res => {
        for (const key in res.data.content) {
          this.addList.option.push({
            value: res.data.content[key].id,
            label: res.data.content[key].userName
          })
          this.editList.option.push({
            value: res.data.content[key].id,
            label: res.data.content[key].userName
          })
        }
      })
    },
    addToData (val) {
      this.addToDataList = {
        id: '',
        option: [],
        sta: []
      }
      this.addToDataList.id = val.id
      this.getAddToUserData(val.id)
    },
    jhYes () {
      if (this.addToDataList.sta.length == 0) {
        this.$message.error('请选择用户')
        return false
      }
      const data = {
        grouoId: this.addToDataList.id,
        userIdList: this.addToDataList.sta
      }
      this.$requestA.post('/relationship/addGURelation ', data, res => {
        this.dialogAddToSta = false
        this.getTableList()
        if (res.code == '200') {
          this.$message.success('操作成功')
        }
      })
    },
    getAddToDataList () {
      const data = {
        tenantCode: localStorage.getItem('TENANT_CODE')
      }
      this.addToDataList.option = []
      this.$requestA.get('/user', data, res => {
        for (const key in res.data.content) {
          this.addToDataList.option.push({
            value: res.data.content[key].id,
            label: res.data.content[key].userName
          })
        }
        this.dialogAddToSta = true
      })
    },
    getAddToUserData (val) {
      const data = {
        userGroupId: val
      }
      this.$requestA.get('/userGroup/queryUserListByGroupId', data, res => {
        for (const key in res.data) {
          this.addToDataList.sta.push(res.data[key].id)
        }
        this.getAddToDataList()
      })
    },
    // 获取所有用户信息
    getGenerateData () {
      const data = {

      }
      this.$requestA.post('', data, res => {
        console.log(res)
        if (res.code == '200') {

        }
      })
    },
    // 获取用户组信息
    getUserZuData () {
      const data = {

      }
      this.$requestA.post('', data, res => {
        if (res.code == '200') {

        }
      })
    },
    // 删除用户组
    delData (val) {
      this.$confirm('确定要删除当前用户组吗？', '提示', {
        confirmButtonText: '确定',
        type: 'warning'
      }).then(() => {
        this.$requestA.dele('/userGroup/' + val.id, {}, res => {
          this.getTableList()
          if (res.code == '200') {
            this.$message.success('删除成功')
          }
        })
      })
      // this.$requestA.dele('/userGroup/' + val.id, {}, res => {
      //   console.log(res)
      //   this.getTableList()
      // })
    },
    handleSizeChange (val) {
      console.log(val)
      this.tableQuery.limit = val
      this.tableQuery.indexNo = 0
      this.getTableList()
    },
    handleCurrentChange (val) {
      this.tableQuery.indexNo = val - 0 - 1
      this.getTableList()
    },
    //   新增按钮
    addData () {
      this.addList.name = ''
      this.addList.sta = []
      this.dialogAddSta = true
    },
    // 新增确定
    addYes () {
      if (this.addList.name.trim() == '') {
        this.$message.error('请输入用户组名称')
        return false
      }
      const data = {
        groupName: this.addList.name,
        tenantCode: localStorage.getItem('TENANT_CODE'),
        userIdList: this.addList.sta
      }
      this.$requestA.post('/userGroup', data, res => {
        this.dialogAddSta = false
        this.getTableList()
        if (res.code == '200') {
          this.$message.success('操作成功')
        }
      })
    },
    // 重置按钮
    redit () {
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchBox.name = ''
      this.searchSta = false
      this.getTableList()
    },
    // 搜索按钮
    goSearch () {
      this.tableQuery.limit = 5;
      this.tableQuery.indexNo = 0;
      this.searchSta = true
      this.getTableList()
    },
    // 编辑弹框确定
    editYes () {
      if (this.editList.name.trim() == '') {
        this.$message.error('请输入用户组名称')
        return false
      }
      const data = {
        id: this.dataList.id,
        groupName: this.editList.name,
        tenantCode: localStorage.getItem('TENANT_CODE'),
        userIdList: this.editList.sta
      }
      this.dataList.groupName = this.editList.name
      this.$requestA.put('/userGroup', data, res => {
        this.dialogEditSta = false
        this.getTableList()
        if (res.code == '200') {
          this.$message.success('操作成功')
        }
      })
    },
    // 编辑按钮
    editData (data) {
      this.dataList = data
      this.editList.id = data.id
      this.editList.name = data.groupName
      this.editList.sta = []
      this.$requestA.get('/userGroup/' + data.id, {}, res => {
        for (const key in res.data) {
          this.editList.sta.push(res.data[key].userDTO.id)
        }
      })
      this.dialogEditSta = true
    },
    //   获取table数据
    getTableList () {
      const data = {
        size: this.tableQuery.limit,
        page: this.tableQuery.indexNo,
        tenantCode: localStorage.getItem('TENANT_CODE'),
        groupName: this.searchSta ? this.searchBox.name : ''
      }
      this.$requestA.get('/userGroup', data, res => {
        console.log(res)
        this.tableData = res.data.content
        this.total = res.data.totalElements
      })
    }
  },
  created () {
    this.$route.meta.menuList.map(item => {
      if (item.eleName == '查询') {
        this.permissionList.cx = true
      } else if (item.eleName == '新增') {
        this.permissionList.xz = true
      } else if (item.eleName == '编辑') {
        this.permissionList.bj = true
      } else if (item.eleName == '添加') {
        this.permissionList.tj = true
      } else if (item.eleName == '删除') {
        this.permissionList.sc = true
      }
    })
    this.getUserList()
    this.getTableList()
  }
}
</script>

<style scoped>
@import '../../assets/css/base.css';
.search_box {
  background: #fff;
  border-radius: 5px;
  padding: 40px 40px 60px 40px;
  margin: 0 0 20px 0;
}
.box_center {
  text-align: left;
}
.searchBtn {
  margin-left: 80px;
}
.reditBtn {
  margin-left: 20px;
}
</style>
